<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.函数中的this,表示的调用函数的当前对象
        var a="熊";//全局变量
        function fn(){
            var a="羊";//局部变量
            console.log("局部变量："+a);

            //解决局部变量和全局变量同名的问题
            console.log("全局变量："+window.a);
            console.log(this);//此处的this表示window，因为window调用的此函数
            console.log("全局变量："+this.a);
        }
        fn();
        // window.fn();


        // 2.构造函数中的this，表示将来new出来的对象
        var name="老杨";//全局变量
        function Person(name,age){
            //添加属性
            this.name=name;
            this.age=age;
            //添加方法
            this.show=function(){
                console.log(this.name);//杨昌盛 
                console.log(this.age);//30 
                console.log(name);//熊振宇  
                console.log(window.name);//老杨
            };
        }
        var p=new Person("熊振宇",30);
        p.name="杨昌盛";

        console.log(p);
        p.show();

        //3.函数绑定中的this,表示的是事件源，触发事件的元素
        function show(obj){
            console.log(obj);
        }

        window.onload=function(){
            var mydiv=document.getElementById("mydiv");
            mydiv.onclick=function(){
                console.log(this);
            };
        };
      
    </script>
</head>
<body>
    <input type="button" value="我是按钮" onclick="show(this)">
    <div id="mydiv">mydiv</div>
</body>
</html>